﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .input-group {
        margin-bottom: 2em;
    }
</style>
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <table class="table table-hover table-bordered" id="table">
            <tr>
                <th>营业收入记账日</th>
                <th>营业额</th>
                <th>操作人</th>
                <th>所属业主</th>
                <th>更新时间</th>
            </tr>
            <tr>
                <td>2015-06-06 13:45</td>
                <td>￥ 99</td>
                <td>张三</td>
                <td>园区3部</td>
                <td>2015-06-17 14:50</td>
            </tr>
            <tr>
                <td>2015-06-06 13:45</td>
                <td>￥ 99</td>
                <td>张三</td>
                <td>园区3部</td>
                <td>2015-06-17 14:50</td>
            </tr>
        </table>
    </div>
    <div class="col-md-2"></div>
</div>
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-7"></div>
    <div class="col-md-1">
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" id="tianjia">+ 添加</button>
    </div>
    <div class="col-md-2"></div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加数据</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <div class="input-group-addon">请选择记账时间:</div>
                    <input type="text" id="DateTime" value="@DateTime.Now" datetimeold="@DateTime.Now" readonly class=" form_datetime form-control">
                </div>
                <div class="input-group">
                    <div class="input-group-addon">请输入营业额:</div>
                    <input type="number" class="form-control" id="manmy" />
                </div>
                <div class="input-group">
                    <div class="input-group-addon">请输入操作人:</div>
                    <input type="text" class="form-control" id="user" />
                </div>
                <div class="input-group">
                    <div class="input-group-addon">请输入业主:</div>
                    <input type="text" class="form-control" id="yezhu" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="baocun">保存</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(".form_datetime").datetimepicker({ format: 'yyyy-mm-dd hh:ii' });


    $("#baocun").click(function () {
        var datetime = $("#DateTime").val();
        var manmy = $("#manmy").val();
        var user = $("#user").val();
        var yezhu = $("#yezhu").val();
        var datetimeold = $("#DateTime").attr("datetimeold");

        if (datetime != "" && manmy != "" && user != "" && yezhu != "") {
            var str = '<tr><td>' + datetime + '</td><td>￥ ' + manmy + '</td><td>' + user + '</td><td>' + yezhu + '</td><td>' + datetimeold + '</td></tr>';
            $("#table").append(str);
            $("#manmy").val("");
            $("#user").val("");
            $("#yezhu").val("");
            $("#tianjia").click();
        } else {
            alert("请完整填写信息！");
        }

    })
</script>
